@import "app/styles/bootstrap/variables"
// It seems, conditional imports are not allowed, so flag is added to variables.scss
@import "ozaria/site/styles/common/variables"

#teacher-courses-view
  //TODO: Refactor colors into .style-flat?

  h1
    margin-top: 50px

  #site-content-area
    margin-bottom: 250px

  .access-restricted
    margin-top: 75px

  .courses
    margin-top: 20px

    .course
      padding: 30px

      .concepts
        @if $is-codecombat
          font-weight: regular
        @else
          font-weight: 600

      .play-level-form
        font-weight: normal

  .course:nth-child(2n+1)
    background-color: #ebebeb

  .course:nth-child(2n)
    background-color: $gray-lighter

  .show-change-log
    text-decoration: underline

  .video-thumbnail
    width: 100%
    @if $is-codecombat
      cursor: pointer

  .modal-dialog
    width: auto
    max-width: 1024px
    height: auto
    max-height: 580px

  .video-wrapper
    position: relative
    margin-top: 10%
    width: 100%
    height: 100%
    .video-player
      position: absolute
      width: 100%
      height: 580px
      background-color: #000000
    .video-close-btn
      position: absolute
      right: -5px
      color: white
      top: -5px
      background: #ba1d00
      padding: 6px 6px 3px
      border: 2px solid #14110e
      border-radius: 0px

  @if not $is-codecombat
    .coming-soon-row.row
      background: #F5F5F5
      text-align: center
      padding-bottom: 32px
      font-style: italic

    .guide-btn
      margin: 5px

    .control-label
      display: block
      .level-select
        span.text
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          display: block
        .dropdown-header.module-label
          @include font-h-4-uppercase-white-left-align
          background: $color-module-color-slate
          height: 37px
          padding: 5px 15px
        .dropdown-menu
          padding-top: 0px
          box-shadow: 4px 4px 15px 0 rgba(0,0,0,0.5)
          border-radius: 8px
          max-width: 319px
          z-index: 1040 // more than the top main-nav bar of the website
        .level-content, .dropdown-menu, .dropdown-menu > li > a
          @include font-p-3-paragraph-small-gray
          .intro-content
            margin-left: 20px
        .dropdown-menu > li > a
          padding-left: 1.25em
        .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > li > a:hover
          background: #0170E9
          color: $white
      .level-select > .dropdown-toggle:hover, .open .btn-default.dropdown-toggle
        background-color: unset
